<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">修改信息</el-button>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
          <el-tab-pane label="基本信息" name="first" default>

            <el-descriptions title="个人信息" direction="vertical" border style="margin-top: 20px">
              <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
                <el-image style="width: 100px; height: 100px" :src="`${SERVER_ADDR}/upload/${medical.picdir}`" />
              </el-descriptions-item>
              <el-descriptions-item label="员工名">{{ medical.mname }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ medical.mphone }}</el-descriptions-item>
              <el-descriptions-item label="入职时间">{{ medical.entryDate }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag type="success">在职</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="照顾的老人">
                <el-table :data="elderlies" border style="width: 80%; margin-top: 30px; margin-left: 10%;">
                  <el-table-column prop="eid" label="ID" width="50px" />
                  <el-table-column prop="ename" label="姓名" width="100px" />
                  <el-table-column prop="picdir" label="头像" width="110px">
                    <template #default="scope">
                      <el-avatar :size="80" :src="SERVER_ADDR+ '/upload/' + scope.row.picdir"></el-avatar>
                    </template>
                  </el-table-column>
                  <el-table-column prop="egender" label="性别" width="80px" />
                  <el-table-column prop="dateBirth" label="出生日期" width="120px" />
                  <el-table-column prop="checkDate" label="入住日期" width="120px" />
                  <el-table-column prop="emergencyContact" label="紧急联系人" width="200px" />
                  <el-table-column prop="room.rno" label="房间号" width="80px" />
                  <el-table-column prop="phone" label="联系方式" width="200px" />
                </el-table>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </el-card>
		</el-col>
	</el-row>
  <!-- 修改护工对话框开始 -->
	<el-dialog v-model="updateDialoadShowMedical" title="修改护工" width="500">
		<el-form>
			<el-form-item label="头像" label-width="20%">
				<el-upload class="avatar-uploader" :action="`${SERVER_ADDR}/emp/file/upload`" name="pic"
        :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccessUpdate" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrlUpdate" :src="imageUrlUpdate" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item label="姓名" label-width="20%">
				<el-input v-model="medicalUpdata.mname" autocomplete="off" style="width: 240px" />
			</el-form-item>
			<el-form-item label="护工号" label-width="20%">
				<el-input v-model="medicalUpdata.mno" autocomplete="off" style="width: 240px" disabled />
			</el-form-item>
			<el-form-item label="用户名" label-width="20%">
				<el-input v-model="medicalUpdata.musername" autocomplete="off" style="width: 240px" disabled />
			</el-form-item>
			<el-form-item label="性别" label-width="20%">
				<el-radio-group v-model="medicalUpdata.mgender">
					<el-radio value="男" border>男</el-radio>
					<el-radio value="女" border>女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="入职日期" label-width="20%">
				<el-date-picker v-model="medicalUpdata.entryDate" type="date" placeholder="请选择一个时间" format="YYYY-MM-DD"
					value-format="YYYY-MM-DD" style="width: 240px" />
			</el-form-item>
			<el-form-item label="联系电话" label-width="20%">
				<el-input v-model="medicalUpdata.mphone" autocomplete="off" style="width: 240px" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="updateDialoadShowMedical = false">取消</el-button>
				<el-button type="primary" @click="updateByMedical">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 修改护工对话框结束 -->
</template>
<script setup>
import medicalApi from '@/api/admin/medicalApi.js';
import { computed, ref } from 'vue'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useTokenStore } from '@/stores/token';
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const medical = ref({});
const activeName = ref('first')
const elderlies = ref([]);
const tokenStore = useTokenStore();
//上传图片
const headers = computed(() => {
	let token = tokenStore.tokenStr;
	return {
		token
	}
})
//获取员工的基本信息
const getinfo = () => {
  medicalApi.selectBymidEmp()
    .then(resp => {
      medical.value = resp.data
      elderlies.value = resp.data.elderlies
    })
}
const medicalUpdata = ref({});
//定义修改对话框
const updateDialoadShowMedical = ref(false);
//显示修改数据
const showAddModel = ()=>{
  medicalApi.selectBymidEmp()
    .then(resp => {
      medicalUpdata.value = resp.data
      imageUrlUpdate.value = `${SERVER_ADDR.value}/upload/${resp.data.picdir}`;
      console.log(imageUrlUpdate.value)
    })
  updateDialoadShowMedical.value = true;
}
//修改员工信息
const updateByMedical = ()=>{
    medicalApi.updateByMedical(medicalUpdata.value)
        .then(resp => {
          if(resp.code == 10000){
            ElMessage.success(resp.msg);
            updateDialoadShowMedical.value = false;
            getinfo()
          }else{
            ElMessage.error(resp.msg)
          }
        })
}

const imageUrlUpdate = ref("");
const handleAvatarSuccessUpdate = (response, uploadFile) => {
	if (response.code == 10000) {

		ElMessage.success(response.msg);
		imageUrlUpdate.value = `${SERVER_ADDR.value}/upload/${response.data}`;
		medicalUpdata.value.picdir = response.data;
	}
}
const beforeAvatarUpload = (rawFile) => {
	if (rawFile.type !== 'image/jpeg') {
		ElMessage.error('只能上传jpg格式的图片')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('图片大小不能超过2MB')
		return false
	}
	return true
}
getinfo();
</script>
<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-progress .el-progress--line {
	margin-bottom: 10px;
	max-width: 100%;
}

.avatar-uploader,
.avatar {
	width: 178px;
	height: 178px;
	display: block;
	border: 1px dotted #dcdfe6;
	border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
}
</style>